<template>
  <div id="swdytest">
    <el-menu
      default-active="1"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <!-- 一级菜单 -->
      <template v-for="item in list">
        <el-submenu
          v-if="item.subs && item.subs.length"
          :index="item.path"
          :key="item.path"
        >
          <template slot="title">
            <span>{{item.name}}</span>
          </template>
          <!-- 二级菜单 -->
          <template v-for="itemChild in item.subs">
            <el-submenu
              v-if="itemChild.subs && itemChild.subs.length"
              :index="itemChild.path"
              :key="itemChild.path"
            >
              <template slot="title">
                <span>{{itemChild.name}}</span>
              </template>
              <!-- 三级菜单 -->
              <el-menu-item
                v-for="itemChild_Child in itemChild.subs"
                :index="itemChild_Child .path"
                :key="itemChild_Child.path"
              >
                <span slot="title">{{itemChild_Child.name}}</span>
              </el-menu-item>
            </el-submenu>

            <el-menu-item v-else :index="itemChild.path" :key="itemChild.path">
              <span slot="title">{{itemChild.name}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :index="item.path" :key="item.path">
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "swdytest",
  data() {
    return {
      list: [
        {
          path: "/1",
          name: "导航一",
          subs: [
            {
              path: "/1/1",
              name: "导航1-1",
              subs: [
                {
                  path: "/1/1/1",
                  name: "导航1-1-1",
                },
                {
                  path: "/1/1/2",
                  name: "导航1-1-2",
                },
                {
                  path: "/1/1/3",
                  name: "导航1-1-3",
                }
              ]
            },
            {
              path: "/1/2",
              name: "导航1-2",
            }
          ]
        },
        {
          path: "/2",
          name: "导航二"
        }
      ]
    };
  }
};
</script>

<style lang="scss">
#swdytest {
}
</style>
